<template>
	<view>
		<map id="myMap" style="width: 100%; height: 100vh;" :scale="13" :markers="markers" :latitude="latitude"
			:longitude="longitude" enable-zoom enable-scroll @labeltap="handlelabeltap" @tap="handleMaker"
			:enable-satellite="isSatellite" show-location></map>
		<!-- 搜索 -->
		<view class="search-view flex-alignItems-center" @click="handleChooseLoaction">
			<u-icon name="search" color="#333333" size="25"></u-icon>
			<view class="fontSize-14 color-999">搜索地名</view>
		</view>

		<!-- 地图弹窗 -->
		<image class="map-choose-image img-crisp-edges" @click="mapChooseShow = true" src="../../static/image/13.png"
			mode=""></image>
		<!-- 地图搜索 -->
		<image class="map-choose-image1 img-crisp-edges" src="../../static/image/22.png" mode=""
			@click="$tools.navigateTo('/pages/data-acquisition/collection-list')"></image>
		<!-- 地图定位 -->
		<image class="map-choose-image2 img-crisp-edges" src="../../static/image/15.png" mode=""
			@click="handleGetLocation"></image>
		<!-- 类型弹窗 -->
		<view class="map-choose-image3View" @click="chooseTypeCoordinate">
			<image class="map-choose-image3 img-crisp-edges" v-if="IsCoordinate" src="../../static/image/16.png"
				mode=""></image>
			<image class="map-choose-image3 img-crisp-edges" v-else src="../../static/image/17.png" mode=""></image>
		</view>
		<view class="map-coordinate-view flex-justAliCenter-column" v-if="IsCoordinate">
			<view class="flex-center margin-bottom20" @click="handleRiskType('崩塌滑坡')">
				<view class="margin-right10">
					<image class="img-32" v-if="riskType == '崩塌滑坡'" src="../../static/mapIcon/beng-04.png" mode="">
					</image>
					<image class="img-32" v-else src="../../static/mapIcon/beng-00.png" mode=""></image>
				</view>
				<view class="fontSize-13 color-808080" :class="riskType=='崩塌滑坡'?'risk-type-activeTitle':''"
					style="width: 120rpx;">崩塌滑坡</view>
			</view>
			<view class="flex-center margin-bottom20" @click="handleRiskType('泥石流')">
				<view class="margin-right10">
					<image class="img-32" v-if="riskType == '泥石流'" src="../../static/mapIcon/ni-04.png" mode=""></image>
					<image class="img-32" v-else src="../../static/mapIcon/ni-00.png" mode=""></image>
				</view>
				<view class="fontSize-13 color-808080" :class="riskType=='泥石流'?'risk-type-activeTitle':''"
					style="width: 120rpx;">泥石流</view>
			</view>
			<view class="flex-center" @click="handleRiskType('沉陷水毁')">
				<view class="margin-right10">
					<image class="img-32" v-if="riskType == '沉陷水毁'" src="../../static/mapIcon/chen-04.png" mode="">
					</image>
					<image class="img-32" v-else src="../../static/mapIcon/chen-00.png" mode=""></image>
				</view>
				<view class="fontSize-13 color-808080" :class="riskType=='沉陷水毁'?'risk-type-activeTitle':''"
					style="width: 120rpx;">沉陷水毁</view>
			</view>
		</view>

		<!-- 开始标记 -->
		<view class="mark-btn-view flex-center" @click="handleTipsMaker">
			开始标记
		</view>

		<!-- 地图切换 -->
		<u-popup :show="mapChooseShow" :round="10" mode="right" :overlay="false" closeable @close="mapChooseClose">
			<view class="map-choose-popup">
				<view style="height: 100rpx;"></view>
				<view class="flex-justAliCenter-column margin-bottom30 map-item" v-for="(item,index) in mapTabList"
					:key="index" @click="handleMapChoose(index)"
					:class="mapChooseIndex == index?'map-choose-active':''">
					<image class="img-100 margin-bottom20" :src="item.image" mode="">
						<view class="fontSize-13 color-000">{{item.name}}</view>
				</view>
			</view>
		</u-popup>
		<!-- 标记展示风险弹窗 -->
		<view class="risk-popup-view" v-if="isAddMaker">
			<view class="flex-center" style="position: relative;">
				<view class="risk-popup-iconview"></view>
				<view class="close-popup-view" @click="cancelAddMaker">
					<u-icon name="close" color="#333333" size="20"></u-icon>
				</view>
			</view>
			<view class="risk-popup-center">
				<view class="fontSize-16 color-000 margin-bottom20">
					{{addMakerInfo.address}}
				</view>
				<view class="fontSize-15 color-4D4D4D margin-bottom20">
					<text class="margin-right20">经度:</text>
					<text> {{addMakerInfo.lat}}</text>
				</view>
				<view class="fontSize-15 color-4D4D4D margin-bottom20">
					<text class="margin-right20">纬度:</text>
					<text> {{addMakerInfo.lng}}</text>
				</view>
				<!-- <view class="fontSize-15 color-4D4D4D margin-bottom20">
					<text class="margin-right20">海拔:</text>
					<text> 12.00m</text>
				</view> -->
				<view class="fontSize-15 color-4D4D4D margin-bottom20">
					<text class="margin-right20">省市区:</text>
					<text> {{addMakerInfo.province}} {{addMakerInfo.city}} {{addMakerInfo.district}}</text>
				</view>
				<view style="height: 60rpx;"></view>
				<view class="flex-alignItems-center">
					<view class="report-view-btn2 flex-center" @click="cancelAddMaker">取消</view>
					<view class="report-view-btn1 flex-center" @click="SubmitAddMaker">开始标记</view>
				</view>
			</view>
		</view>
		<!-- 搜索弹窗 -->
		<view class="search-list-view" v-if="false">
			<view class="search-item-view f-divider1 margin-bottom20 padding-bottom20">
				<view class="fontSize-14 margin-bottom10" style="color: #323232;">浙江省杭州市西湖区后陡门58号</view>
				<view class="fontSize-12" style="color: #808080;">2.4km</view>
			</view>
			<view class="search-item-view f-divider1 margin-bottom20 padding-bottom20">
				<view class="fontSize-14 margin-bottom10" style="color: #323232;">浙江省杭州市西湖区后陡门58号</view>
				<view class="fontSize-12" style="color: #808080;">2.4km</view>
			</view>
			<view class="search-item-view f-divider1 margin-bottom20 padding-bottom20">
				<view class="fontSize-14 margin-bottom10" style="color: #323232;">浙江省杭州市西湖区后陡门58号</view>
				<view class="fontSize-12" style="color: #808080;">2.4km</view>
			</view>
			<view class="search-item-view f-divider1 margin-bottom20 padding-bottom20">
				<view class="fontSize-14 margin-bottom10" style="color: #323232;">浙江省杭州市西湖区后陡门58号</view>
				<view class="fontSize-12" style="color: #808080;">2.4km</view>
			</view>
		</view>
		<!-- 采集信息标记点展示信息 -->
		<view class="risk-popup-view" v-if="isGatherMakerInfo">
			<view class="flex-center margin-bottom50" style="position: relative;">
				<image class="img-44 start-gather-popup img-crisp-edges" src="../../static/image/23.png" mode="">
				</image>
				<view class="risk-popup-iconview"></view>
				<view class="close-popup-view" @click="closeGatherMaker">
					<u-icon name="close" color="#333333" size="20"></u-icon>
				</view>
			</view>
			<view class="flex-between margin-bottom30">
				<view class="fontSize-16 color-000">
					浙江省杭州市富阳区万市路37号
				</view>
				<u-icon name="edit-pen" color="#333333" size="25"></u-icon>
			</view>

			<view class="margin-bottom30">
				<text class="fontSize-13 color-333 margin-right20">备注:</text>
				<text class="fontSize-13 color-333">G1523 K330+745左侧，杭州市富阳区，甬台温复线温州瑞安至苍南</text>
			</view>
			<view class="flex" style="flex-direction: row-reverse;">
				<view class="level-icon-view flex-center">
					四级
				</view>
				<view class="class-icon-view flex-center">
					Ⅰ类
				</view>
			</view>
			<view class="fontSize-15 color-333 margin-bottom30">
				图片
			</view>
			<scroll-view class="gather-scroll-view" scroll-x="true">
				<view class="flex-alignItems-center">
					<image class="gather-item-image"
						@click="$tools.previewImage('https://survey.chunchuangkeji.cn/images/11.jpg')"
						src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
					<image class="gather-item-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode="">
					</image>
					<image class="gather-item-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode="">
					</image>
					<image class="gather-item-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode="">
					</image>
				</view>
			</scroll-view>
			<view style="height: 60rpx;"></view>
		</view>
		<!-- 采集信息标记确认修改 -->
		<view class="risk-popup-view" v-if="isQueRenMaker">
			<view class="flex-center margin-bottom50" style="position: relative;">
				<!-- <image class="img-44 start-gather-popup img-crisp-edges" src="../../static/image/23.png" mode=""></image> -->
				<view class="risk-popup-iconview"></view>
				<view class="close-popup-view" @click="closeQueRenMaker">
					<u-icon name="close" color="#333333" size="20"></u-icon>
				</view>
			</view>
			<view class="fontSize-15 margin-bottom50" style="color: #2F54EB;">
				确认修改为以下地址？
			</view>
			<view class="fontSize-16 color-000 margin-bottom20">
				浙江省杭州市富阳区万市路37号
			</view>
			<view class="fontSize-15 color-4D4D4D margin-bottom20">
				<text class="margin-right20">经度:</text>
				<text> 30.29784814773039</text>
			</view>
			<view class="fontSize-15 color-4D4D4D margin-bottom20">
				<text class="margin-right20">纬度:</text>
				<text> 120.03327439149419</text>
			</view>
			<view class="fontSize-15 color-4D4D4D margin-bottom20">
				<text class="margin-right20">海拔:</text>
				<text> 12.00m</text>
			</view>
			<view class="fontSize-15 color-4D4D4D margin-bottom20">
				<text class="margin-right20">省市区:</text>
				<text> 浙江省杭州市富阳区</text>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="flex-alignItems-center">
				<view class="report-view-btn2 flex-center">取消</view>
				<view class="report-view-btn1 flex-center" @click="SubmitEvent">
					确认标记
				</view>
			</view>
		</view>
		<!-- 已存在的标记点修改 -->
		<view class="risk-popup-view" v-if="isSaveMakerInfo">
			<view class="flex-center margin-bottom50" style="position: relative;">
				<image class="img-44 start-gather-popup img-crisp-edges" src="../../static/mapIcon/beng-04.png" mode="">
				</image>
				<view class="risk-popup-iconview"></view>
				<view class="close-popup-view" @click="closeSaveMaker">
					<u-icon name="close" color="#333333" size="20"></u-icon>
				</view>
			</view>
			<view class="flex-between margin-bottom30">
				<view class="fontSize-16 color-000">
					工点编号：ZJ-WZ-WC-G4012-01
				</view>
				<view class="flex-alignItems-center">
					<view class="fontSize-13" style="color: #4B6DFD;">调查登记</view>
					<u-icon name="arrow-right" color="#4B6DFD" size="15"></u-icon>
				</view>
			</view>

			<view class="margin-bottom30 fontSize-13 color-333">
				K330+745 左侧 | 路堑边坡 | 浙江省绍兴市柯桥区 |
				甬台温复线温州瑞安至苍南 | 边坡长度50m | 边坡高度40m
			</view>
			<!-- <view class="flex" style="flex-direction: row-reverse;">
				<view class="level-icon-view flex-center">
					四级
				</view>
				<view class="class-icon-view flex-center">
					Ⅰ类
				</view>
			</view> -->
			<view class="fontSize-15 color-333 margin-bottom30">
				图片
			</view>
			<scroll-view class="gather-scroll-view" scroll-x="true">
				<view class="flex-alignItems-center">
					<image class="gather-item-image"
						@click="$tools.previewImage('https://survey.chunchuangkeji.cn/images/11.jpg')"
						src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
					<image class="gather-item-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode="">
					</image>
					<image class="gather-item-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode="">
					</image>
					<image class="gather-item-image" src="https://survey.chunchuangkeji.cn/images/11.jpg" mode="">
					</image>
				</view>
			</scroll-view>
			<view style="height: 60rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		retry
	} from 'neo-async'
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				isSatellite: false, // 是否切换卫星地图
				search: '', // 搜索
				IsCoordinate: false, // 类型弹窗
				mapChooseShow: false, // 地图切换弹窗
				mapTabList: [{
						name: '标准地图',
						image: '../../static/image/21.png'
					},
					{
						name: '卫星地图',
						image: '../../static/image/21.png'
					}
				],
				mapChooseIndex: 0, //地图类型索引
				isAddMaker: false, // 点击标记展示坐标信息
				isGatherMakerInfo: false, // 点击标记展示采集信息
				isSaveMakerInfo: false, // 点击已存在的标记点
				isQueRenMaker: false, // 确认是否修改标记点,
				location: '', //标记点定位
				markers: [], //标记点列表
				makerIcon: {}, //标记点坐标信息
				addMakerInfo: {}, //添加标记点信息
				pointsAllList: [], // 所有标记点列表
				riskPointsList: [], //风险点标记点列表 
				riskType: '',
				caijiList: [], // 采集列表
				caijiParams: {
					current: 1,
					size: 500,
					model: {
						collectTimeEnd: '', // 结束时间
						collectTimeStart: '', // 开始时间
						region: '', // 行政区划
						riskType: '', // 风险类型
						userKeyword: '', // 标签
						workNo: '' // 工点编号
					}
				}, // 采集参数
			}
		},
		onLoad() {
			// 生成地图对象
			this._mapContext = uni.createMapContext("myMap", this);
			this.getInitMarkerCluster()
			if (uni.getStorageSync('location')) {
				this.latitude = uni.getStorageSync('location').lat
				this.longitude = uni.getStorageSync('location').lng
				let location = {
					lat: this.latitude,
					lng: this.longitude,
				}
				this.getRiskPoints(location)
			}
		},
		methods: {
			// 选择地址
			handleChooseLoaction(){
				this.$wxApi.getchooseLocation().then(data => {
					console.log(data)
					this._mapContext.moveToLocation({
						latitude: data.latitude,
						longitude: data.longitude,
						success: (res) => {
							console.log(res)
							// 这里加300ms的延时是为了防止和moveToLocation功能冲突，保留地图移动的动画
							// const timer = setTimeout(() => {
							// 	this.scale = 13;
							// }, 300);
						},
					})
				})
			},
			// 初始定位
			handleGetLocation() {
				this._mapContext.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: (res) => {
						console.log(res)
						// 这里加300ms的延时是为了防止和moveToLocation功能冲突，保留地图移动的动画
						// const timer = setTimeout(() => {
						// 	this.scale = 13;
						// }, 300);
					},
				})
			},
			// 调用点聚合功能
			getInitMarkerCluster() {
				// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: true,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
						console.log('initMarkerCluster', res)
					}
				});

				// this._mapContext.on("markerClusterCreate", (e) => {
				// 	console.log("markerClusterCreate", e);
				// });
			},
			// 选择风险类型
			handleRiskType(type) {
				let location = {
					lat: this.latitude,
					lng: this.longitude,
				}
				if (this.riskType == type) {
					this.riskType = ''
					this.getRiskPoints(location)
				} else {
					this.riskType = type
					this.getRiskPoints(location, this.riskType)
				}
			},
			// 获取风险点列表
			async getRiskPoints(location, type) {
				let res = await this.getMapCode(location)
				let params = {
					gcj02: true,
					keyword: '',
					region: res.data.result.ad_info.adcode
				}
				let result = await this.$http.post(this.$api.riskPoints, params, {
					token: true
				})
				let caijiResult = await await this.$http.post(this.$api.manualCollectPage, this.caijiParams, {
					token: true
				})
				let debrisList = []
				let slopeList = []
				let subsideList = []
				let caijiList = []
				let iconPath = ''
				let lat = ''
				let lng = ''
				let str = ''
				if (result.data.debrisList.length > 0) {
					debrisList = result.data.debrisList.map(item => {
						if (item.riskLevel == 1) {
							iconPath = '../../static/mapIcon/ni-01.png'
						} else if (item.riskLevel == 2) {
							iconPath = '../../static/mapIcon/ni-01.png'
						} else if (item.riskLevel == 3) {
							iconPath = '../../static/mapIcon/ni-01.png'
						} else if (item.riskLevel == 4) {
							iconPath = '../../static/mapIcon/ni-01.png'
						} else {
							iconPath = '../../static/mapIcon/ni-01.png'
						}
						lat = item.lat.substring(0, 9)
						lng = item.lng.substring(0, 10)
						return {
							id: Number(item.id),
							latitude: lat,
							longitude: lng,
							status: '泥石流',
							width: 30,
							height: 30,
							iconPath: iconPath,
							joinCluster: true,
							label: {
								content: item.echoMap.region, //文本
								color: '#333333', //文本颜色
								borderRadius: 3, //边框圆角
								borderWidth: 1, //边框宽度
								borderColor: '#ffffff', //边框颜色
								bgColor: '#ffffff', //背景色
								padding: 5, //文本边缘留白
								textAlign: 'center' //文本对齐方式。有效值: left, right, center
							}
						}
					})
				}
				if (result.data.slopeList.length > 0) {
					slopeList = result.data.slopeList.map(item => {
						if (item.riskLevel == 1) {
							iconPath = '../../static/mapIcon/beng-01.png'
						} else if (item.riskLevel == 2) {
							iconPath = '../../static/mapIcon/beng-02.png'
						} else if (item.riskLevel == 3) {
							iconPath = '../../static/mapIcon/beng-03.png'
						} else if (item.riskLevel == 4) {
							iconPath = '../../static/mapIcon/beng-04.png'
						} else {
							iconPath = '../../static/mapIcon/beng-05.png'
						}
						lat = item.lat.substring(0, 9)
						lng = item.lng.substring(0, 10)
						return {
							id: Number(item.id),
							latitude: lat,
							longitude: lng,
							status: '崩塌滑坡',
							width: 30,
							height: 30,
							iconPath: iconPath,
							joinCluster: true,
							label: {
								content: item.echoMap.region, //文本
								color: '#333333', //文本颜色
								borderRadius: 3, //边框圆角
								borderWidth: 1, //边框宽度
								borderColor: '#ffffff', //边框颜色
								bgColor: '#ffffff', //背景色
								padding: 5, //文本边缘留白
								textAlign: 'center' //文本对齐方式。有效值: left, right, center
							}
						}
					})
				}
				if (result.data.subsideList.length > 0) {
					subsideList = result.data.subsideList.map(item => {
						if (item.riskLevel == 1) {
							iconPath = '../../static/mapIcon/chen-01.png'
						} else if (item.riskLevel == 2) {
							iconPath = '../../static/mapIcon/chen-02.png'
						} else if (item.riskLevel == 3) {
							iconPath = '../../static/mapIcon/chen-03.png'
						} else if (item.riskLevel == 4) {
							iconPath = '../../static/mapIcon/chen-04.png'
						} else {
							iconPath = '../../static/mapIcon/chen-05.png'
						}
						lat = item.lat.substring(0, 9)
						lng = item.lng.substring(0, 10)
						return {
							id: Number(item.id),
							latitude: lat,
							longitude: lng,
							status: '泥石流',
							width: 30,
							height: 30,
							iconPath: iconPath,
							joinCluster: true,
							label: {
								content: item.echoMap.region, //文本
								color: '#333333', //文本颜色
								borderRadius: 3, //边框圆角
								borderWidth: 1, //边框宽度
								borderColor: '#ffffff', //边框颜色
								bgColor: '#ffffff', //背景色
								padding: 5, //文本边缘留白
								textAlign: 'center' //文本对齐方式。有效值: left, right, center
							}
						}
					})
				}
				if (caijiResult.data.records.length > 0) {
					caijiList = caijiResult.data.records.map(item => {
						console.log(item.id)
						console.log(Number(item.id))
						lat = item.lat.substring(0, 9)
						lng = item.lng.substring(0, 10)
						return {
							id: Number(item.id),
							latitude: lat,
							longitude: lng,
							status: '泥石流',
							width: 30,
							height: 30,
							iconPath: '../../static/mapIcon/jiance-02.png',
							joinCluster: true,
							label: {
								content: item.location, //文本
								color: '#333333', //文本颜色
								borderRadius: 3, //边框圆角
								borderWidth: 1, //边框宽度
								borderColor: '#ffffff', //边框颜色
								bgColor: '#ffffff', //背景色
								padding: 5, //文本边缘留白
								textAlign: 'center' //文本对齐方式。有效值: left, right, center
							}
						}
					})
				}
				this.pointsAllList = [...result.data.debrisList, ...result.data.slopeList, ...result.data.subsideList,
					...caijiResult.data.records
				]
				this.markers = [...caijiList, ...debrisList, ...slopeList, ...subsideList]
				// console.log(this.markers)
				// 风险类型切换
				if (type) {
					if (type == '崩塌滑坡') {
						this.markers = this.markers.filter(item => {
							return item.status == type
						})
					}
					if (type == '泥石流') {
						this.markers = this.markers.filter(item => {
							return item.status == type
						})
					}
					if (type == '沉陷水毁') {
						this.markers = this.markers.filter(item => {
							return item.status == type
						})
					}
				}
				this._mapContext.addMarkers({
					markers: this.markers,
					clear: true,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			// 点击标记点label
			handlelabeltap(e) {
				console.log(e, 111)
				let markerId = ''
				let arr = []
				markerId = e.detail.markerId + ''
				markerId = markerId.substring(0, 16)
				console.log(markerId)

				if (this.pointsAllList.length > 0) {
					arr = this.pointsAllList.filter(item => {
						return item.id.substring(0, 16) == markerId
					})
					this.$tools.navigateTo('/pages/data-acquisition/collection-message-edit?id=' + arr[0].id)
				}
			},
			// 开始标记点
			SubmitAddMaker() {
				this.$tools.navigateTo('/pages/data-acquisition/collection-message?addMakerInfo=' + JSON.stringify(this
					.addMakerInfo))
				this.isAddMaker = false
			},
			// 取消标记点
			cancelAddMaker() {
				let i = this.markers.indexOf(this.makerIcon)
				console.log(i)
				if (i > -1) {
					this.markers.splice(i, 1)
					this.$forceUpdate()
					// this.markers = []
				}
				this.isAddMaker = false
			},
			// 添加标记点
			handleMaker(e) {
				// this.markers = []
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否添加标记点',
					success: function(res) {
						if (res.confirm) {
							let location = {
								lat: e.detail.latitude,
								lng: e.detail.longitude,
							}
							that.getMapCode(location).then(res => {
								that.addMaker(res)
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消添加',
								icon: 'none'
							})
						}
					}
				});
			},
			// 获取标记点信息，添加标记点，打开标记点弹窗
			addMaker(res) {
				// 标记点信息
				let obj = {
					address: res.data.result.address,
					lat: res.data.result.location.lat,
					lng: res.data.result.location.lng,
					province: res.data.result.address_component.province,
					city: res.data.result.address_component.city,
					district: res.data.result.address_component.district
				}
				this.addMakerInfo = obj

				// 添加标记点
				let marker = {
					id: 1,
					latitude: res.data.result.location.lat,
					longitude: res.data.result.location.lng,
					width: 30,
					height: 30,
					iconPath: "../../static/mapIcon/jiance-01.png",
					label: {
						content: res.data.result.address, //文本
						color: '#333333', //文本颜色
						borderRadius: 3, //边框圆角
						borderWidth: 1, //边框宽度
						borderColor: '#ffffff', //边框颜色
						bgColor: '#ffffff', //背景色
						padding: 5, //文本边缘留白
						textAlign: 'center' //文本对齐方式。有效值: left, right, center
					}
				}
				this.makerIcon = marker
				this.markers.push(marker)
				console.log(this.markers)
				this.isAddMaker = true
			},
			// 请选择添加标记点
			handleTipsMaker() {
				if (!this.isAddMaker) return this.$tools.toast('请选择添加标记点')
			},
			// 关闭已存在标记点
			closeSaveMaker() {
				this.isSaveMakerInfo = false
			},
			// 点击已存在标记点弹窗
			handleSaveMaker() {
				this.isSaveMakerInfo = !this.isSaveMakerInfo
			},
			// 关闭展示采集信息弹窗
			closeGatherMaker() {
				this.isGatherMakerInfo = false
			},
			// 点击标记展示采集信息弹窗
			handleGatherMakerInfo() {
				this.isGatherMakerInfo = !this.isGatherMakerInfo
			},
			// 关闭展示坐标信息
			closePopup() {
				this.isAddMaker = false
			},
			// 点击标记展示坐标信息
			chooseIsAddMaker() {
				this.isAddMaker = !this.isAddMaker
			},
			// 风险类型弹窗
			chooseTypeCoordinate() {
				this.IsCoordinate = !this.IsCoordinate
			},
			// 地图类型切换
			handleMapChoose(index) {
				if (index == 0) {
					this.isSatellite = false
				}
				if (index == 1) {
					this.isSatellite = true
				}
				this.mapChooseIndex = index
				this.mapChooseShow = false
			},
			// 地图选择关闭弹窗
			mapChooseClose() {
				this.mapChooseShow = false
			},
			// 地址逆解析
			getMapCode(location) {
				return new Promise((reslove, reject) => {
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=YQ5BZ-5Z5LW-TKTRA-3TRPZ-OI6LH-52BJD&get_poi=1&location=' +
							location.lat + ',' + location.lng,
						header: {
							'custom-header': 'application/json;charset=UTF-8'
						},
						success: (res) => {
							reslove(res)
						},
						fail(err) {
							reject(err)
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.risk-type-activeTitle {
		color: #2F54EB !important;
	}

	.report-view-btn2 {
		width: 180rpx;
		height: 90rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #2F54EB;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #4B6DFD;
		margin-right: 20rpx;
	}

	.report-view-btn1 {
		width: 490rpx;
		height: 90rpx;
		background: #4B6DFD;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		letter-spacing: 10rpx;
	}

	.gather-item-image:last-child {
		margin-right: 0;
	}

	.gather-item-image {
		width: 240rpx;
		height: 240rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	// 图片scroll
	.gather-scroll-view {
		width: 100%;
	}

	// 风险等级
	.level-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
	}

	.class-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		background: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
		margin-right: 20rpx;
	}

	// 标记弹窗
	.start-gather-popup {
		position: absolute;
		top: -10rpx;
		left: 10rpx;
	}

	// 搜索列表
	.search-list-view {
		position: absolute;
		top: 113rpx;
		left: 30rpx;
		width: 650rpx;
		height: 400rpx;
		padding: 20rpx;
		overflow-y: auto;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(0, 0, 0, 0.16);
		border: 1rpx solid #DBDBDB;
		opacity: 0.9;
		z-index: 100;
	}

	// 关闭弹窗
	.close-popup-view {
		position: absolute;
		top: -10rpx;
		right: 10rpx;
	}

	.level-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
	}

	.class-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		background: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
		margin-right: 20rpx;
	}

	.risk-popup-center {
		margin-top: 30rpx;
		// padding-bottom: 30rpx;
	}

	.risk-popup-iconview {
		width: 90rpx;
		height: 7rpx;
		background: #D5D5D5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.risk-popup-view1 {
		width: 95%;
		padding: 30rpx 20rpx;
		height: 1150rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	.risk-popup-view {
		width: 95%;
		padding: 30rpx 20rpx;
		min-height: 300rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	// 风险弹窗
	// 开始标记
	.mark-btn-view {
		position: absolute;
		bottom: 100rpx;
		left: 30rpx;
		width: 690rpx;
		height: 90rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #4B6DFD;
		box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, 0.31);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	// 风险弹窗
	.map-coordinate-view {
		position: absolute;
		bottom: 480rpx;
		right: 20rpx;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
		z-index: 100;
		border-radius: 20rpx;
	}

	.map-choose-image3View {
		position: absolute;
		bottom: 660rpx;
		right: 20rpx;
	}

	.map-choose-image3 {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	.map-choose-image2 {
		position: absolute;
		bottom: 780rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	// 卫星地图切换
	.map-item {
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.map-choose-active {
		background-color: #eeeeee !important;
	}

	.map-choose-popup {
		width: 160rpx;
		padding: 30rpx;
	}

	.map-choose-image1 {
		position: absolute;
		top: 380rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	.map-choose-image {
		position: absolute;
		top: 260rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	// 搜索
	.search-input {
		font-size: 15px;
		color: #333333;
		margin-left: 10rpx;
	}

	.search-view {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		width: 670rpx;
		height: 40rpx;
		padding: 20rpx 10rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(0, 0, 0, 0.28);
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		border: 1rpx solid #DBDBDB;
	}
</style>